﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="menuCSS3.aspx.cs" Inherits="DLV.BackEnd.Pages.menuCSS3" %>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
	<title>[Demo] Làm thế nào để tạo menu Accordion ấn tượng với jQuery và CSS3 - 2Cwebvn</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="author" content="2Cweb.vn" />
	<link href="../favicon.png" rel="icon" type="image/x-icon" >
	<link rel="stylesheet" href="images/mystyle.css" type="text/css" media="screen">
</head>

<body>
	<center><h2>Làm thế nào để tạo menu Accordion ấn tượng với jQuery và CSS3 - 2Cwebvn</h2></center>
	<div id="wrapper">
		<ul class="accordion_menu">
			<li>
				<a href="#">I. My Web [2Cweb.vn]</a>
				<ul class="sub-menu" style="display: block; ">
					<li><a href="http://2cweb.vn" target="_blank"><em>01</em>Trang chủ</a></li>
					<li><a href="http://2cweb.vn/about.html" target="_blank"><em>02</em>Giới thiệu</a></li>
					<li><a href="http://2cweb.vn/services/" target="_blank"><em>03</em>Dịch vụ</a></li>
					<li><a href="http://2cweb.vn/portfolio/" target="_blank"><em>04</em>Dự án</a></li>
					<li><a href="http://2cweb.vn/blog/" target="_blank"><em>05</em>Blog - Bài viết</a></li>
					<li><a href="http://2cweb.vn/contact.html" target="_blank"><em>06</em>Liên hệ</a></li>
				</ul>
			</li>
			
			<li>
				<a href="#" class="">II. Bài viết về Design</a>
				<ul class="sub-menu" style="display: none; ">
					<li><a href="http://2cweb.vn/news/illustrator-indesign/doc-dao-voi-bo-suu-tap-thiet-ke-cv-danh-cho-dan-designer-3-58.html" target="_blank"><em>01</em>ĐỘC ĐÁO VỚI BỘ SƯU TẬP THIẾT KẾ CV DÀNH CHO DÂN DESIGNER</a></li>
					<li><a href="http://2cweb.vn/news/search-engine-optimization-seo/lam-the-nao-index-bai-viet-website-len-cac-cong-cu-tim-kiem-29-53.html" target="_blank"><em>02</em>LÀM THẾ NÀO INDEX BÀI VIẾT WEBSITE LÊN CÁC CÔNG CỤ TÌM KIẾM</a></li>
					<li><a href="http://2cweb.vn/news/graphic-design/sang-tao-cung-bo-suu-tap-font-handmade-ngo-nghinh-cua-hmf-6-46.html" target="_blank"><em>03</em>SÁNG TẠO CÙNG BỘ SƯU TẬP FONT HANDMADE NGỘ NGHĨNH CỦA HMF</a></li>
					<li><a href="http://2cweb.vn/news/photography/vong-quanh-the-gioi-qua-cac-buc-anh-tilt-shift-tuyet-dep-26-48.html" target="_blank"><em>04</em>VÒNG QUANH THẾ GIỚI QUA CÁC BỨC ẢNH TILT SHIFT TUYỆT ĐẸP</a></li>
					<li><a href="http://2cweb.vn/news/web-design/an-tuong-voi-cac-mau-thiet-ke-web-day-mau-sac-phan-1-4-47.html" target="_blank"><em>05</em>ẤN TƯỢNG VỚI CÁC MẪU THIẾT KẾ WEB ĐẦY MÀU SẮC ( PHẦN 1)</a></li>
					<li><a href="http://2cweb.vn/news/web-design/an-tuong-voi-cac-mau-thiet-ke-web-day-mau-sac-phan-2-4-50.html" target="_blank"><em>06</em>ẤN TƯỢNG VỚI CÁC MẪU THIẾT KẾ WEB ĐẦY MÀU SẮC ( PHẦN 2)</a></li>
					<li><a href="http://2cweb.vn/blog" target="_blank"><em>07</em>AND MORE...</a></li>
				</ul>
			</li>
			
			<li>
				<a href="#" class="">III. Bài viết về Development PHP</a>
				<ul class="sub-menu" style="display: none; ">
					<li><a href="http://2cweb.vn/news/php-mysql/tim-kiem-du-lieu-voi-php-ket-hop-ajax-jquery-12-51.html" target="_blank"><em>01</em>TÌM KIẾM DỮ LIỆU VỚI PHP KẾT HỢP AJAX JQUERY</a></li>
					<li><a href="http://2cweb.vn/news/php-mysql/9-syntax-highlighting-lam-dep-code-trong-bai-viet-12-40.html" target="_blank"><em>02</em>9 SYNTAX HIGHLIGHTING LÀM ĐẸP CODE TRONG BÀI VIẾT</a></li>
					<li><a href="http://2cweb.vn/news/php-mysql/co-ban-ve-form-trong-php-12-26.html" target="_blank"><em>03</em>CƠ BẢN VỀ FORM TRONG PHP</a></li>
					<li><a href="http://2cweb.vn/news/php-mysql/cach-tao-file-zip-voi-php-12-33.html" target="_blank"><em>04</em>CÁCH TẠO FILE ZIP VỚI PHP</a></li>
					<li><a href="http://2cweb.vn/news/php-mysql/tao-form-login-hoan-chinh-bang-ky-thuat-ajax-va-validate-jquery-12-36.html" target="_blank"><em>05</em>TẠO FORM LOGIN HOÀN CHỈNH BẰNG KỸ THUẬT AJAX VÀ VALIDATE JQUERY</a></li>
					<li><a href="http://2cweb.vn/category/12-php-mysql" target="_blank"><em>06</em>AND MORE...</a></li>
				</ul>
			</li>
			
			<li>
				<a href="#" class="">IV. Bài viết về jQuery - Ajax</a>
				<ul class="sub-menu" style="display: none; ">
					<li><a href="http://2cweb.vn/news/jquery-javascript/dung-mootools-tao-thu-vien-trung-bay-anh-voi-hieu-ung-dep-mat-11-37.html" target="_blank"><em>01</em>DÙNG MOOTOOLS TẠO THƯ VIỆN TRƯNG BÀY ẢNH VỚI HIỆU ỨNG ĐẸP MẮT</a></li>
					<li><a href="http://2cweb.vn/news/jquery-javascript/jquery-validate-plugin-kiem-tra-du-lieu-nhap-tren-form-11-35.html" target="_blank"><em>02</em>JQUERY VALIDATE - PLUGIN KIỂM TRA DỮ LIỆU NHẬP TRÊN FORM</a></li>
					<li><a href="http://2cweb.vn/news/jquery-javascript/back-to-top-cuc-dinh-bang-ten-lua-voi-jquery-sprite-11-19.html" target="_blank"><em>03</em>BACK TO TOP CỰC ĐỈNH BẰNG TÊN LỬA VỚI JQUERY SPRITE</a></li>
					<li><a href="http://2cweb.vn/news/html-css/tao-tooltip-don-gian-khong-can-javascript-10-24.html" target="_blank"><em>04</em>TẠO TOOLTIP ĐƠN GIẢN KHÔNG CẦN JAVASCRIPT</a></li>
					<li><a href="http://2cweb.vn/news/jquery-javascript/huong-dan-phong-to-anh-cung-voi-tieu-de-voi-zoom-thumnail-image-jquery-11-15.html" target="_blank"><em>05</em>PHÓNG TO ẢNH CÙNG VỚI TIÊU ĐỀ VỚI ZOOM THUMNAIL IMAGE JQUERY</a></li>
					<li><a href="http://2cweb.vn/category/11-jquery-javascript" target="_blank"><em>06</em>AND MORE...</a></li>
				</ul>
			</li>
			
		</ul>
	</div>


	<script type="text/javascript" src="images/jquery.min.js"></script>
	<script type="text/javascript">

	    $(document).ready(function () {
	        // Tạo các biến chứa các giá trị cần thiết
	        var acc_head = $('.accordion_menu > li > a'),
				acc_body = $('.accordion_menu li > .sub-menu');

	        // Mở menu tab đầu tiên khi load trang web
	        acc_head.first().addClass('active').next().slideDown('normal');

	        // Tạo sự kiện click cho các thẻ a trong tab
	        acc_head.on('click', function (event) {

	            // Không cho link đến thẻ a trong tab
	            event.preventDefault();

	            // Hiển thị và ẩn tab khi ta click
	            if ($(this).attr('class') != 'active') {
	                acc_body.slideUp('normal');
	                $(this).next().stop(true, true).slideToggle('normal');
	                acc_head.removeClass('active');
	                $(this).addClass('active');
	            }
	        });
	    });
	</script>
</body>